<template>
  <div class="news-list">
    <button class="back-btn" @click="goBack">←</button>
    <!-- 新闻项列表-->
    <div class="news-item" v-for="(item, index) in newsList" :key="index">
      <img :src="item.imageUrl" alt="新闻图片" class="news-img">
      
      <div class="news-content">
        <div class="news-title">
          {{ item.title }}
          <span class="top-tag" v-if="item.isTop">置顶</span>
        </div>
        <div class="news-meta">
          <span class="source">{{ item.source }}</span>
          <span class="time">{{ item.date }}</span>
          <span class="comment">评论 {{ item.commentCount }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const newsList = ref([
  {
    title: "把握历史大势，共创美好未来（观沧海）",
    source: "人民日报",
    date: "2025.10.25",
    commentCount: 1025,
    isTop: true,
    imageUrl: "/static/gq.png"
  },
  {
    title: "乘势而上，续写中国奇迹新篇章——党的二十届四中全会侧记",
    source: "新华社",
    date: "2025.10.25",
    commentCount: 77,
    isTop: true,
    imageUrl: "/static/qg.jpg"
  },
  {
    title: "党的二十届四中全会公报学习手账，为基本实现社会主义现代化而共同奋斗",
    source: "人民日报",
    date: "2025.10.29",
    commentCount: 987,
    isTop: false,
    imageUrl: "/static/hd.png"
  },
  {
    title: "学习二十届四中全会精神 推进高质量发展",
    source: "人民日报",
    date: "2025.10.30",
    commentCount: 649,
    isTop: true,
    imageUrl: "/static/lw.png"
  },
  {
    title: "14个月从100家门店开到1000家门店，蜜雪冰城为何买下这家精酿啤酒商",
    source: "界面新闻",
    date: "2025.10.02",
    commentCount: 56,
    isTop: false,
    imageUrl: "/static/xw.png"
  }
]);

const goBack = () => {
  // 若用Vue Router，可添加：
  // import { useRouter } from 'vue-router';
  // const router = useRouter();
  // router.back();
};
</script>

<style scoped>
.news-list {
  padding: 16px;
  width: 500px;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.back-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-bottom: 12px;
}

.news-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  align-items: center;
}

.news-item:last-child {
  border-bottom: none;
}

.news-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.news-content {
  flex: 1;
}

.news-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.top-tag {
  background-color: #f5222d;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 2px;
  margin-left: 8px;
}

.news-meta {
  font-size: 14px;
  color: #666;
  display: flex;
  justify-content: space-between;
}
</style>